<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<el-form :inline="true" :model="dataForm">
						<el-row>
							<el-form-item>
								<el-input size="small" v-model="dataForm.tray" placeholder="箱号" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button size="small" @click="getCheckdetailFn()">查询</el-button>
							</el-form-item>
						</el-row>
						<el-row>
							<el-form-item>
								<el-button size="small" type="primary" @click="addOrUpdateHandle()">新增</el-button>
							</el-form-item>
							<el-form-item>
								<el-button size="small" type="primary" @click="saveHandle()">保存并回库</el-button>
							</el-form-item>
							<el-form-item>
								<el-button size="small" type="primary" @click="saveHandle2()">保存不回库</el-button>
							</el-form-item>
							<!-- <el-form-item>
								<el-button @click="backToStereoFn()">回库</el-button>
							</el-form-item> -->
						</el-row>
					</el-form>
					<el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;">
						<!--  <el-table-column prop="id" label="序号"  header-align="center"
                                           align="center"></el-table-column> -->
						<el-table-column prop="checkkey" label="盘点号" header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="line" label="行号" header-align="center" align="center"></el-table-column>
						<!--  <el-table-column prop="status" label="状态"  header-align="center"
			align="center"></el-table-column> -->
						<el-table-column prop="statusstr" label="状态" header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="sku" label="物料" header-align="center" align="center"></el-table-column>
						<el-table-column prop="descr" label="物料名称" header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="lot" label="批号" header-align="center" align="center"></el-table-column>
						<el-table-column prop="location" label="库位编码" header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="tray" label="箱" header-align="center" align="center"></el-table-column>
						<el-table-column prop="box" label="格" header-align="center" align="center"></el-table-column>
						<el-table-column prop="qty" label="数量" header-align="center" align="center"></el-table-column>
						<el-table-column prop="firstqty" label="初盘数量" header-align="center" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.firstqty" onkeyup="value=value.replace(/[^0-9.]/g,'')">
								</el-input>
							</template>
						</el-table-column>
						<el-table-column prop="secondqty" label="复盘数量" header-align="center" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.secondqty" onkeyup="value=value.replace(/[^0-9.]/g,'')">
								</el-input>
							</template>
						</el-table-column>
						<el-table-column prop="uniquecodes" label="唯一码" header-align="center" align="center">
							<template #default="scope">
								<el-button @click="showDialog(scope.row)" v-if="scope.row.isuniquecode==1"
									v-bind:disabled="scope.row.status>5"> 录入唯一码</el-button>
							</template>
						</el-table-column>
						<el-table-column prop="lot1" label="生产日期" header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="lot2" label="有效日期" header-align="center" align="center">
						</el-table-column>
						<!-- <el-table-column prop="lot3" label="属性3"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="lot4" label="属性4"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="lot5" label="属性5"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="lot6" label="属性6"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="lot7" label="属性7"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="lot8" label="属性8"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="lot9" label="属性9"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="lot10" label="属性10"  header-align="center"
                                           align="center"></el-table-column>
										   <el-table-column prop="firstuser" label="初盘人"  header-align="center"
										   align="center"></el-table-column>
										            <el-table-column prop="firsttime" label="初盘时间"  header-align="center"
										   align="center"></el-table-column>
										           
										            <el-table-column prop="seconduser" label="复盘人"  header-align="center"
										   align="center"></el-table-column>
										            <el-table-column prop="secondaddtime" label="复盘时间"  header-align="center"
										   align="center"></el-table-column>
                                               <el-table-column prop="remark" label="备注"  header-align="center"
                                           align="center"></el-table-column> -->

						<el-table-column type="expand" fixed="right" label="详情">
							<template #default="props">
								<el-form label-position="left" inline class="demo-table-expand">
									<el-row>
										<el-col :span="4">
											<el-form-item label="是否加长:">
												<span>{{ props.row.lot3 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="价格:">
												<span>{{ props.row.lot4 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="部门/供应商:">
												<span>{{ props.row.lot5 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="计划单号/工序号:">
												<span>{{ props.row.lot6 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="主制车间:">
												<span>{{ props.row.lot7 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="任务编码:">
												<span>{{ props.row.lot8 }}</span>
											</el-form-item>
										</el-col>
									</el-row>

									<el-row>
										<el-col :span="4">
											<el-form-item label="新旧:">
												<span>{{ props.row.lot9 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="作废:">
												<span>{{ props.row.lot10 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="炉批号:">
												<span>{{ props.row.lot11 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="材料复验号:">
												<span>{{ props.row.lot12 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="牌号:">
												<span>{{ props.row.lot13 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="属性14:">
												<span>{{ props.row.lot14 }}</span>
											</el-form-item>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="4">
											<el-form-item label="属性15:">
												<span>{{ props.row.lot15 }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="初盘人">
												<span>{{ props.row.firstuser }}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="初盘时间:">
												<span>{{ props.row.firsttime}}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="复盘人:">
												<span>{{ props.row.seconduser}}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="复盘时间:">
												<span>{{ props.row.secondaddtime}}</span>
											</el-form-item>
										</el-col>
										<el-col :span="4">
											<el-form-item label="备注:">
												<span>{{ props.row.remark}}</span>
											</el-form-item>
										</el-col>

									</el-row>
								</el-form>
							</template>
						</el-table-column>


						<!--         <el-table-column prop="backstatus" label="回传状态"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="backdate" label="回传时间"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="backresult" label="回传结果"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="backcode" label="回传码"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="warehouse" label="仓库"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="adduser" label="创建人"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="addtime" label="创建时间"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="updatuser" label="修改人"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="updatetime" label="修改时间"  header-align="center"
                                           align="center"></el-table-column> -->
						<el-table-column label='操作' fixed="right" header-align="center" align="center" width="80">
							<template #default="scope">

								<el-button type="text" size="small" v-if="!scope.row.lot && scope.row.lot < 9 "
									@click="deleteHandle(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<checkdetailTrayInAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdateRef"
						@refresh-data-list="getCheckdetailFn"></checkdetailTrayInAddOrUpdate>
				</el-card>
				<el-dialog v-model="dialogFormVisible" ref="dalogRef">
					<el-form :v-model="formdata">
						<el-form-item label="唯一码">
							<el-input v-model="formdata.uniquecodes" placeholder="唯一码" type="textarea" rows="5"
								@change="duplicateRemoval">
							</el-input>
						</el-form-item>
					</el-form>
					<template #footer>
						<span class="dialog-footer">
							<el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
							<el-button size="small" type="primary" @click="subClick">确 定</el-button>
						</span>
					</template>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';

	import {
		getCheckdetail,
		putCheckdetailSave,
        putCheckdetailSave2,
		putCheckdetailSaveUniquecodes,
		deleteCheckdetail
	} from '@/network/lswms/check/Checkdetail.js';

	import {
		getUniquecodeByTray
	} from '@/network/lswms/uniquecode/Uniquecode.js'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import checkdetailTrayInAddOrUpdate from "@/components/lswms/check/CheckdetailTrayInAddOrUpdate";
	//import {hasPermission} from "@/utils/hasPermission"
	export default {

		name: "checkdetailIn",
		components: {
			checkdetailTrayInAddOrUpdate,
		},
		setup() {
			const dataList = ref(null)
			const dataForm = ref({
				tray: ''
			})
			const dataListLoading = ref(false);
			const getCheckdetailFn = () => {

				if (dataForm.value.tray.trim() == '' || dataForm.value.tray == null || dataForm.value.tray.trim()
					.length == 0) {
					return ElMessage.error("请录入箱号");
				}

				getCheckdetail(dataForm.value.tray).then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					dataList.value = res.data;

				})
			}

			const addOrUpdateVisible = ref(false)
			const addOrUpdateRef = ref(null)
			const addOrUpdateHandle = () => {
				if (dataForm.value.tray.trim() == '' || dataForm.value.tray == null || dataForm.value.tray.trim()
					.length == 0) {
					return ElMessage.error("请录入箱号");
				}

				addOrUpdateVisible.value = true;
				nextTick(function() {
					addOrUpdateRef.value.dataForm.tray = dataForm.value.tray;
					addOrUpdateRef.value.init();
				})
			}


			const saveHandle = () => {
				ElMessageBox.confirm('确定要更改的记录吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					putCheckdetailSave(dataList.value).then((res) => {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getCheckdetailFn();
							}
						});
					}).catch(function() {})
				})
			}

            const saveHandle2 = () => {
                ElMessageBox.confirm('确定要更改的记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function() {
                    putCheckdetailSave2(dataList.value).then((res) => {
                        if (res.code != 0) {
                            return ElMessage.error(res.msg);
                        }
                        ElMessage({
                            message: '操作成功',
                            type: 'success',
                            duration: 500,
                            onClose: function() {
                                getCheckdetailFn();
                            }
                        });
                    }).catch(function() {})
                })
            }

			const deleteHandle = (id) => {
				ElMessageBox.confirm('确定进行删除操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					deleteCheckdetail([id]).then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getCheckdetailFn();
							}
						});
					}).catch(function() {});
				}).catch(function() {});
			}

			const formdata = ref({
				lot: '',
				tray: '',
				box: '',
				sku: '',
				checkkey: '',
				line: '',
				uniquecodes: ''
			})
			const dalogRef = ref();

			const dialogFormVisible = ref(false);
			const showDialog = (row) => {

				dialogFormVisible.value = true;
				formdata.value = row;
				if (!row.uniquecodes || row.uniquecodes.length < 1) {
					//查询唯一码唯一码信息
					let lot = row.lot;
					let tray = row.tray;
					let box = row.box;
					let sku = row.sku;
					let param = {
						'lot': lot,
						'tray': tray,
						'box': box,
						'sku': sku
					}
					getUniquecodeByTray(param).then((res) => {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						let uniquecodesTmp = res.data.map((item) => {
							return item.uniquecode
						});
						formdata.value.uniquecodes = uniquecodesTmp.join("\n");
					}).catch()
				}

			}
			const subClick = () => {
				//在盘点明细中保存唯一码记录
				putCheckdetailSaveUniquecodes(formdata.value).then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					dialogFormVisible.value = false;
				})
			}

			const duplicateRemoval = () => {
				let uniquecodes = formdata.value.uniquecodes.split('\n')
				let newArr = Array.from(new Set(uniquecodes));

				if (newArr.length > 0) {
					formdata.value.uniquecodes = newArr.join("\n");
				} else {
					formdata.value.uniquecodes = [];
				}
			}
			return {
				getCheckdetailFn,
				dataList,
				dataForm,
				dataListLoading,
				addOrUpdateVisible,
				addOrUpdateHandle,
				addOrUpdateRef,
				saveHandle,
                saveHandle2,
				formdata,
				dalogRef,
				dialogFormVisible,
				showDialog,
				subClick,
				duplicateRemoval,
				deleteHandle
			}
		},
		// methods:{
		// 	hasPermission
		// }
	}
</script>

<style scoped>

</style>
